<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<style>
		.nav {
			overflow: hidden;
			text-align: center;
			background-color: #f4f4f4;
		}
		.nav li {
			float: left;
			padding: 5px;
			width: 50px;
			color: #666;
			list-style: none;
			border-left: 1px solid #f4f4f4;
			cursor: pointer;
		}
		.nav li:hover,.selected {
			background-color:#ecebeb;
			border-left: 1px solid #ecebeb;
		}
		.content{
			border: 1px solid #f4f4f4;
			height: 80px;
			padding: 10px;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<ul class="nav">
		<li class="selected">姓名</li>
		<li>年龄</li>
		<li>性别</li>
		<li>班级</li>
	</ul>
	<div class="content">
		<div class="list ">
			<p>姓名：</p>
			<p>黎明</p>
		</div>
		<div  class="list">
			<p>年龄：</p>
			<p>22</p>
		</div>
		<div  class="list">
			<p>性别：</p>
			<p>男</p>
		</div>
		<div  class="list">
			<p>班级：</p>
			<p>商务班级</p>
		</div>
	</div>
	<script>
			$(function(){
				//获取点击事件的对象
				$(".nav li").click(function(){
					//获取要显示或隐藏的对象
					var divShow = $(".content").children('.list');
					//判断当前对象是否被选中，如果没选中的话进入if循环
					if (!$(this).hasClass('selected')) {
						//获取当前对象的索引
						var index = $(this).index();
						//当前对象添加选中样式并且其同胞移除选中样式；
						$(this).addClass('selected').siblings('li').removeClass('selected');
						//索引对应的div块显示
						$(divShow[index]).show();
						//索引对应的div块的同胞隐藏
						$(divShow[index]).siblings('.list').hide();
					}
				});
			});
			
	</script>
</body>
</html>
